<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <l-panel :style="{padding:isChild?0:null}" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入模版名称')" v-model="searchWord"  @keyup.enter.native="handleSearch" size="mini" >
                        <el-button @click.native="handleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false"></l-tool-btns>
            </template>

            <div class="l-rblock l-overflow-y" style="padding:0 16px;" v-loading="loading" >
                <template v-for="(item,index) in categorys" >
                    <div :key="index" v-if="getSchemeList(item.f_ItemValue).length > 0" >
                        <div class="title" >{{$t(item.f_ItemName)}}【{{getSchemeList(item.f_ItemValue).length}}】</div>
                        <div class="content-list" >
                            <div class="content-item" @click="handleCreate(item2)" v-for="(item2,index2) in getSchemeList(item.f_ItemValue)" :key="index2" >
                                <div class="content-icon" :style="{'background-color':item2.f_Color}">
                                    <i :class="item2.f_Icon" ></i>
                                </div>
                                <div class="content-text" >{{$t(item2.f_Name)}}</div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </l-panel>
        <wf-create-form ref="form" :code="code" :title="dialogTitle" :visible.sync="dialogVisible" />
    </l-layout>
</template>

<script>
const api = window.$api.workflow.scheme
export default {
  props:{
      isChild:{
          type:Boolean,
          default:false
      }
  },
  data () {
    return {
        list:[],
        list2:[],
        // 搜索
        searchWord:'',
        loading:false,

        code:'',
        dialogTitle:'',
        dialogVisible:false
    };
  },
  computed:{
      categorys(){
          return this.lr_dataItem['FlowSort'] || []
      }
  },
  mounted () {
      this.loadData()
  },
  methods:{
    async loadData(){
        this.loading = true
        this.lr_loadDataItem('FlowSort')
        this.list = await this.$awaitWraper(api.getMyList()) || []
        this.list2 = this.list
        this.loading = false
    },
    getSchemeList(category){
        return this.list.filter(t=>t.f_Category == category)
    },
    // 搜索
    handleSearch(){
       this.list = this.list2.filter(t=>t.f_Name.indexOf(this.searchWord) != -1)
    },
    // 创建流程
    handleCreate(data){
        this.code = data.f_Code
        this.dialogTitle = data.f_Name
        this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
    color: #909399;
    cursor: default;
    font-size: 12px;
    line-height: 17px;
    padding-top: 16px;
    padding-bottom: 8px;
}
.content-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.content-item{
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    width: 235px;
    height: 70px;
    border: 1px solid #e4e4e4;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    transition: border .2s ease;
    margin-right: 8px;

    &:hover{
         border: 1px solid #409EFF;
    }
}
.content-icon{
    height: 40px;
    line-height: 40px;
    width: 40px;
    border-radius:4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    margin-left: 16px;
}
.content-text{
    width: 145px;
    margin-left: 10px;
    line-height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #303133;
}
</style>